<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--药品数据-->
      <el-col :span="6" :xs="24">
        <div class="head-container">
          <el-row>
            <el-col :span="16">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入药品名称"
                clearable
                size="small"
                prefix-icon="el-icon-search"
                style="margin-bottom: 5px"
              />
            </el-col>
            <el-col :span="8">
              <el-button type="cyan" icon="el-icon-search" size="mini" @click="getDrugList()" style="float: right">搜索</el-button>
            </el-col>
          </el-row>

        </div>
        <div class="head-container">
          <el-table v-loading="loading" :data="drugList" @row-click="drugSelectClick"style="max-height: 700px;overflow: auto;">
            <el-table-column label="ID" align="center" prop="id" v-if="false"/>
            <el-table-column label="药品名" align="center" prop="name" />
            <el-table-column label="价格(元)" align="center" prop="price" />
            <el-table-column label="类型" align="center" prop="typeId" />
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getDrugList"
          />

        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="18" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-tag type="danger">总计:{{totalPrice}}元</el-tag>
          <el-table v-loading="loading" :data="drugAddList">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="ID" align="center" prop="id" v-if="false"/>
            <el-table-column label="药品编码" align="center" prop="code" />
            <el-table-column label="药品名称" align="center" prop="name" />
            <el-table-column label="药品规格" align="center" prop="format" />
            <el-table-column label="药品单价" align="center" prop="price" />
            <el-table-column label="数量" align="center" width="220" prop="num">
              <template slot-scope="scope">
                <el-input-number v-model="drugAddList[scope.$index].num" @change="handleChange" :min="1" :max="10"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="包装单位" align="center" prop="usageNumUnit" width="80px">
              <template slot-scope="scope">
                <el-select v-model="drugAddList[scope.$index].usageNumUnit"size="mini" placeholder="选择" style="width: 80px">
                  <el-option
                    v-for="dict in usageNumUnitList"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="parseInt(dict.dictValue)"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="医嘱" align="center" prop="medicalAdvice" >
              <template slot-scope="scope">
                <el-input v-model="drugAddList[scope.$index].medicalAdvice" placeholder="医嘱"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="频次" align="center" prop="frequency" >
              <template slot-scope="scope">
                <el-input v-model="drugAddList[scope.$index].frequency" placeholder="频次"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="天数" align="center" prop="days" >
              <template slot-scope="scope">
                <el-input v-model="drugAddList[scope.$index].days" placeholder="天数"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="用量" align="center" prop="usageNum" >
              <template slot-scope="scope">
                <el-input v-model="drugAddList[scope.$index].usageNum" placeholder="用量"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="用法" align="center" prop="usageMeans" >
              <template slot-scope="scope">
                <el-input v-model="drugAddList[scope.$index].usageMeans" placeholder="用法"></el-input>
              </template>
            </el-table-column>
            <el-table-column
            label="操作"
            align="center"
            width="180"
            prop="del"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index,scope.row)"
                v-hasPermi="['system:user:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
          <br/>
          <el-button style="float: right;margin: 10px" @click="cancel" type="info" icon="el-icon-error">取消</el-button>　
          <el-button style="float: right;margin: 10px" @click="herbalItemAdd" type="success" icon="el-icon-success">确定</el-button>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {addMedicine_model_item} from  "@/api/dms/medicine_model_item";
  import{listDrug,getDrug} from "@/api/dms/drug";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";


  export default {
    name: "User",
    data() {
      return {
        /**药品数量*/
        num:[],
        /**包装单位*/
        usageNumUnitList:[],
        /**分页查询*/
        queryParams: {
          pageNum: 1,
          typeId:-103,//非草药
          pageSize: 10,
          status: null,
          name: null,
          scope: null,
          ownId: null,
          aim: null,
          code: null,
          type: 1,
          pairNum: null,
          frequency: null,
          therapy: null,
          therapyDetails: null,
          medicalAdvice: null
        },
       /**模板金额*/
        totalPrice:0,
        //挂号级别
        registrationRankIds:[],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        userList: null,
        //用户点击添加的药品列表
        drugAddList:[],
        //药品数据表格
        drugList:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 默认密码
        initPassword: undefined,
        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "label"
        },
      };
    },
    created() {
      this.getList();
      this.getDrugList();
      this.getDicts("drug_usageNumUnit").then(response => {
        this.usageNumUnitList = response.data;
      });
    },
    methods: {
      /**药品数量计算*/
      handleChange(row){
        this.Amountsettlement();
      },
      /**金额结算*/
      Amountsettlement(){
        let list=this.drugAddList;
        var price=0;
        for(var i=0;i<list.length;i++){
          price+=list[i].price*list[i].num;
        }
        this.totalPrice=price;
      },
      /** 查询用户列表 */
      getList() {

      },
      /** 查询药品信息列表 */
      getDrugList() {
        this.loading = true;
        listDrug(this.queryParams).then(response=>{
          this.drugList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /**点击添加药品*/
      drugSelectClick(row, event, column){
        if(this.drugCheck(row.id)){
          getDrug(row.id).then(response => {
            this.drugAddList.push({
              id:0,
              drugId:response.data.id,
              name:response.data.name,
              price:response.data.price,
              code:response.data.code,
              format:response.data.format,
              usageNumUnit:null,
              manufacturer:response.data.manufacturer,
              dosageName:response.data.dosageName,
              num:1,
              usageNum:response.data.usageNum,
              modelId:this.$route.query.id,
              status:1,
              usageMeans:null,
              days:null

            });
            /**金额结算*/
            this.Amountsettlement();
          });
        }
      },
      /**药品查重*/
      drugCheck(id){
        let list=this.drugAddList;
        for(var i=0;i<list.length;i++){
          if(id==list[i].drugId){
            list[i].num+=1;//如果药品重复，就在数量上加一
            this.Amountsettlement();
            return false;
          }
        }
        return true;
      },
      herbalItemAdd(){
        let list=this.drugAddList;
        if(list.length>0){
          for(var i=0;i<list.length;i++){
            addMedicine_model_item(list[i]).then(response => {
              if (response.code != 200) {
                this.msgError("出错了");
                this.drugAddList=null;
                return;
              }
            });
          }
          this.msgSuccess("添加成功");
          this.$router.push({path: "/master/select_medicine_model_item_byModelID", query: {id: this.$route.query.id}});
          // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
          this.$destroy(true);
        }
        else {
          this.msgError("请先添加药品，再确定提交")
        }
      },
      /** 删除按钮操作 */
      handleDelete(index,row) {
        const userIds = row.id;
        this.$confirm('是否确认删除'+row.name+'数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.drugAddList.splice(index,1);
          this.msgSuccess("删除成功");
          /**金额结算*/
          this.Amountsettlement();
        }).catch(function() {});
      },
      /**通过药品名查询药品信息*/
      getDrugByName(){
        this.getDrugList();
      },
      // 取消按钮
      cancel() {
        this.$router.push({path: "/master/select_medicine_model_item_byModelID", query: {id: this.$route.query.id}});
        // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
        this.$destroy(true);
      }
    }
  };
</script>
